<template>
  <div class="pagination w-full flex justify-between">
    <!-- <div class="pagination-content">
      <span
        >共计 <span class="total">{{ pagination.total }}</span> 条</span
      >
      <span class="ml-5"
        >每页显示<a-select
          class="pagination-select"
          v-model:value="pagination.pageSize"
          :options="pageSizeOptions"
          @change="changePageSize"
        />页/条</span
      >
    </div> -->
    <div></div>
    <a-pagination
      v-model:current="pagination.current"
      v-model:pageSize="pagination.pageSize"
      @change="getListByPage"
      :total="pagination.total"
      :showSizeChanger="props.showSizeChanger"
      :size="props.size"
      :pageSizeOptions="props.pageSizeOptions"
      :showQuickJumper="props.showQuickJumper"
      :show-total="(total : number) => `共 ${total} 条数据`"
    ></a-pagination>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
const props = defineProps({
  pageSize: {
    type: Number,
    default: 10
  },
  pageSizeOptions: {
    type: Array,
    default() {
      return ['10', '20', '50', '100']
    }
  },
  showQuickJumper: {
    type: Boolean,
    default: false
  },
  showSizeChanger: {
    type: Boolean,
    default: true
  },
  size: String
})
const pagination = reactive({
  total: 0,
  pageSize: props.pageSize, // 每页中显示10条数据
  current: 1
})

// const pageSizeOptions = [
//   {
//     label: '10',
//     value: 10
//   },
//   {
//     label: '20',
//     value: 20
//   },
//   {
//     label: '40',
//     value: 40
//   },
//   {
//     label: '100',
//     value: 100
//   }
// ]
const emit = defineEmits(['getListByPage'])
const getListByPage = (page: number, pageSize: number) => {
  emit('getListByPage', page, pageSize)
}

const changeTotal = (total: number) => {
  pagination.total = total
}

const changeCurrent = (current: number) => {
  pagination.current = current
}

// const changePageSize = () => {
//   emit('getListByPage', 1, pagination.pageSize)
// }
defineExpose({ changeTotal, changeCurrent, pagination })
</script>

<style lang="less">
.pagination {
  height: 1.875rem;
  line-height: 1.875rem;

  &-content {
    height: 1.875rem;
    line-height: 1.875rem;
    font-size: 0.875rem;
    color: #666;

    .total {
      font-size: 1rem;
      color: #000;
    }
  }

  &-select {
    margin-right: 0.5rem;
    margin-left: 0.5rem;
    color: #333;
    border-radius: 0.125rem;
    line-height: 1.875rem !important;

    .ant-select-selector {
      height: 1.875rem !important;
      line-height: 1.875rem !important;
      background-color: #f4f4f4 !important;

      .ant-select-selection-item {
        line-height: 1.875rem !important;
      }
    }

    .ant-select-arrow {
      margin-top: -0.5625rem;
    }
  }

  .ant-pagination-options-quick-jumper input {
    height: 1.875rem;
    background-color: @bg-color !important;
    line-height: 1.875rem;
  }

  .ant-pagination-prev .ant-pagination-item-link,
  .ant-pagination-next .ant-pagination-item-link {
    height: 1.875rem;
    background-color: @bg-color;
    line-height: 1.875rem;
  }

  .ant-pagination-prev,
  .ant-pagination-next,
  .ant-pagination-jump-prev,
  .ant-pagination-jump-next {
    height: 1.875rem;
    line-height: 1.875rem;
  }

  .anticon {
    vertical-align: middle;
  }

  .ant-pagination-item,
  a {
    padding: 0;
  }

  .ant-pagination-item {
    width: auto;
  }
}
</style>
